<template>
  <view class="InputWrap class" @click="clickHandler">
    <input
      :placeholder="getPlaceholder()"
      class="Input"
      :disabled="disabled"
      @input="inputHandler"
      :value="value"
    />
    <uni-icons
      class="Icon"
      v-if="type === 'select'"
      type="arrowdown"
      size="24"
    />
  </view>
</template>
<script lang="ts">
import IVueEvent from '@/interfaces/IVueEvent';
import Vue from '@/utils/Vue';
import { PropType } from 'vue';

interface IData {}

export default Vue.extend({
  data(): IData {
    return {};
  },
  components: {},
  props: {
    placeholder: {
      type: String,
      required: false,
    },
    value: {
      required: false,
    },
    disabled: {
      type: Boolean,
      required: false,
    },
    type: {
      type: String as PropType<'select'>,
      required: false,
    },
  },
  methods: {
    getPlaceholder() {
      if (this.placeholder) {
        return this.placeholder;
      } else {
        switch (this.type) {
          case 'select':
            return '请选择';
          default:
            return '请填写';
        }
      }
    },
    inputHandler(event: IVueEvent) {
      this.$emit('input', event);
      const value = event.detail.value;
      this.$emit('update:value', value);
    },

    clickHandler(event: any) {
      this.$emit('click', event);
    },
  },
  options: { virtualHost: true },
  externalClasses: ['class'],
});
</script>
<style lang="less" scoped>
.InputWrap {
  flex-grow: 1;
  flex-shrink: 1;
  position: relative;
  background: white;
  border-radius: 5px;
  .Input {
    border: solid 1px #ebebeb;
    height: 100%;
    width: 100%;
    padding: 10px;
    outline: none;
    box-sizing: border-box;
  }

  .Icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
